<!--
 * @Author: honghong
 * @LastEditors: honghong
 * @Description: 首页
 * @email: 3300536651@qq.com
 * @Date: 2019-04-12 16:39:30
 * @LastEditTime: 2019-10-16 09:41:21
 -->
<div class="fc-home-page">
  <div nz-row [nzGutter]="20">
    <!-- 图表状态 -->
    <div nz-col [nzSpan]="24">
      <nz-card class="sys-home-card fc-mtop-0" nzTitle="图表状态" [nzBordered]="false">
        <div class="fc-chart-box">
          <fc-g2bar fcId="chartBar" [fcData]="chartBarData"></fc-g2bar>
        </div>
      </nz-card>
    </div>
    <!-- 对比图 -->
    <div nz-col [nzSpan]="24">
      <nz-card class="sys-home-card fc-mtop-0" nzTitle="对比图" [nzBordered]="false">
        <div class="fc-chart-box">
          <fc-g2line fcId="chartLine" [fcData]="chartLineData"></fc-g2line>
        </div>
      </nz-card>
    </div>
    <!-- 工作计划 -->
    <div nz-col [nzSpan]="12">
      <nz-card class="sys-home-card" nzTitle="工作计划" [nzBordered]="false">
        <nz-calendar class="fc-calendar">
          <ul *nzDateCell="let date" class="events">
            <ng-container [ngSwitch]="date.getDate()">
              <ng-container *ngSwitchCase="8">
                <li *ngFor="let item of listDataMap.eight">
                  <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
                </li>
              </ng-container>
              <ng-container *ngSwitchCase="10">
                <li *ngFor="let item of listDataMap.ten">
                  <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
                </li>
              </ng-container>
              <ng-container *ngSwitchCase="11">
                <li *ngFor="let item of listDataMap.eleven">
                  <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
                </li>
              </ng-container>
            </ng-container>
          </ul>
          <ng-container *nzMonthCell="let month">
            <div *ngIf="getMonthData(month) as monthData" class="notes-month">
              <section>{{ monthData }}</section>
              <span>Backlog number</span>
            </div>
          </ng-container>
        </nz-calendar>
      </nz-card>
    </div>
    <!-- 待办任务 -->
    <div nz-col [nzSpan]="12">
      <nz-card class="sys-home-card" nzTitle="待办任务" [nzBordered]="false">
        <nz-list [nzDataSource]="toDoTaks" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
          <ng-template #item let-item>
            <nz-list-item>
              <nz-list-item-meta [nzTitle]="nzTitle"
                nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                nzDescription="报表任务还未完成，请在2019年6月1日之前完成。">
                <ng-template #nzTitle>
                  <a href="https://ng.ant.design">{{ item.title }}</a>
                </ng-template>
              </nz-list-item-meta>
            </nz-list-item>
          </ng-template>
        </nz-list>
      </nz-card>
    </div>
    <!-- 系统公告 -->
    <div nz-col [nzSpan]="12">
      <nz-card class="sys-home-card" nzTitle="系统公告" [nzBordered]="false">
        <nz-timeline class="fc-timeline">
          <nz-timeline-item nzColor="green">
            <div class="timelie-title">
              <span> 星期一</span>
              <span class="time">11:24</span>
            </div>
            系统维护，资料卡功能暂时受限 2015-09-01
          </nz-timeline-item>
          <nz-timeline-item nzColor="green">
            <div class="timelie-title">
              <span> 星期一</span>
              <span class="time">11:24</span>
            </div>系统正在优化中，敬请期待 2015-09-01
          </nz-timeline-item>
          <nz-timeline-item nzColor="red">
            <div class="timelie-title">
              <span> 星期一</span>
              <span class="time">11:24</span>
            </div>
            <p>系统正在优化中，敬请期待 1</p>
            <p>系统正在优化中，敬请期待 2</p>
            <p>系统正在优化中，敬请期待s 3 2015-09-01</p>
          </nz-timeline-item>
          <nz-timeline-item>
            <div class="timelie-title">
              <span>星期一</span>
              <span class="time">11:24</span>
            </div>
            <p>系统正在优化中，敬请期待 1</p>
            <p>系统正在优化中，敬请期待 2</p>
            <p>系统正在优化中，敬请期待 3 2015-09-01</p>
          </nz-timeline-item>
        </nz-timeline>
      </nz-card>
    </div>
  </div>
</div>
